<template>
  <div>

	<myheader></myheader>
	

	<section class="featured-block text-center">
		<div class="container">
			
			<div>
				
				<Breadcrumb :datas="datas"></Breadcrumb>


			</div>

			<div>
					
					<img :src="src" />

					<Avatar :src="src" :width="150" fit="fill"></Avatar>

			</div>


			<div>
				
				<table>
					
					<tr>
						
						<td>

							用户头像:
							
						</td>

						<td>

							<input type="file" @change="upload">
							
						</td>


					</tr>




				</table>


			</div>



		</div>
	</section>
	

	
	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>
		
		
	</footer>
    
  </div>
  
</template>


 
<script>

//导入组件
import myheader from './myheader.vue'

export default {
  data () {
    return {
      msg: "这是一个变量",
      //验证码图片地址
      src:'',
      //面包屑导航变量
      datas:[{title:'首页',route:{name:'index'}},{title:'用户中心->我的首页'}]
    }
  },
  //注册组件标签
  components:{

  	'myheader':myheader

  },
  mounted:function(){

   
  
},
  methods:{

  	//定义提交事件
  	upload:function(e){

  		//获取文件
  		let file = e.target.files[0];
  		//声明表单参数
  		let param = new FormData();

  		param.append('file',file,file.name);

  		//声明请求头
  		let config = {headers:{'Content-Type':'multipart/form-data'}}


  		//请求后台接口
  		this.axios.post('http://localhost:8000/upload/',param,config).then((result) =>{


  			console.log(result);

  			this.src = "http://localhost:8000/static/upload/"+result.data.filename;



  		});


  	}

     
  }
}


</script>
 
<style>

td {
	padding:10px;
}

.imgcode {
	cursor:pointer;
}

</style>